<script lang="js" setup name="XMenuItem">
import { ref, computed, onMounted } from "vue";
import SvgIcon from "../SvgIcon.vue";
import { useAppStore } from "../../stores/appStore";
import { storeToRefs  } from "pinia";

const appStore = useAppStore();
const { theme } = storeToRefs(appStore);

const props = defineProps({
	menu: {
		type: Object,
		required: true
	}
});

const emit = defineEmits(["menuclick"]);

const menuItemStyle = computed(() => {
	if (props.menu.separate) {
		const border = {};
		switch (props.menu.separate) {
			case "top":
				border.borderTop = "1px solid #aaa";
				break;
			case "bottom":
				border.borderBottom = "1px solid #aaa";
				break;
			case "both":
				border.borderTop = "1px solid #aaa";
				border.borderBottom = "1px solid #aaa";
				break;
		}
		return border;
	}
});

const iconStyle = computed(() => {
	if (props.menu.checkable) {
		const icon = appStore.theme === "dark" ? "choose-white.png" : "choose.png";
		const url = `url("src/assets/images/${icon}")`;
		return {
			backgroundImage: props.menu.checked
				? url
				: "",
		};
	} else {
		return {
			backgroundImage: props.menu.icon,
		};
	}
});
</script>

<template>
	<li class="menuitem" :style="menuItemStyle" @click="emit('menuclick', menu)">
		<div class="menuitem-bar">
			<svg-icon
				v-if="menu.icon"
				class="menuitem-bar__icon"
				:icon="menu.icon"
				size="28px"
			/>
			<!-- <svg-icon v-else class="menuitem-bar__icon" icon="icon-choose" size="28px" /> -->
			<div v-else class="menuitem-bar__icon" :style="iconStyle"></div>
		</div>
		<div class="menuitem-text">{{ menu.text }}</div>
		<img v-if="menu.image" class="menuitem-image" :src="menu.image" />
	</li>
</template>

<style lang="scss" scoped>
.menuitem {
	display: flex;
	flex-direction: row;
	align-items: center;
	height: 32px;
	// background-color: #fdfdfd;
	background-color: var(--color-menu-bg);
	z-index: 20;
	overflow: hidden;

	/* 移动端触摸优化 */
	touch-action: manipulation;
	-webkit-tap-highlight-color: transparent;
	cursor: pointer;

	/* 移动端高度自适应 */
	@media (max-width: 768px) {
		height: 28px;
	}

	@media (max-width: 480px) {
		height: 24px;
	}
}

.menuitem-bar {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 100%;
	background-color: var(--color-menu-bar);
}

:deep(.menuitem-bar__icon) {
	width: 38px;
	height: 100%;
	background-repeat: no-repeat;
	background-position: center center;
	background-size: 24px auto;
	fill: var(--color-theme-text);
}

.menuitem-text {
	line-height: 32px;
	font-size: 16px;
	padding-left: 10px;
	cursor: default;
	user-select: none;
	-webkit-user-select: none; /* Safari */
	-moz-user-select: none; /* Firefox */
	-ms-user-select: none; /* IE 10 and IE 11 */

	/* 移动端文字大小自适应 */
	@media (max-width: 768px) {
		font-size: 14px;
		line-height: 28px;
		padding-left: 8px;
	}

	@media (max-width: 480px) {
		font-size: 12px;
		line-height: 24px;
		padding-left: 6px;
	}
}

.menuitem-image {
	margin-left: 8px;
}

.menuitem:hover {
	background-color: lightblue;
	color: blue;
	border: 1px solid lightskyblue;
}
</style>
